<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .basic {
            width: 500px;
            height: 150px;
            border: 1px solid #ccc;
        }

        .happy {
            background-color: skyblue;
            background: linear-gradient(to top right, #CDDC39, #8BC34A, #FFEB3B);
            border: 1px solid red;

        }

        .sad {
            border: 1px solid green;
            background-color: #666;

        }

        .normal {
            background-color: #ccc;
            border: 1px solid black;
        }

        .zdy1 {
            background-color: #8BC34A;
        }

        .zdy2 {
            /* background-color: #8BC34A; */
            font-size: 45px;
        }

        .zdy3 {
            border-radius: 10%;
        }
    </style>
    <script src="../js/vue-2.6.12开发.js"></script>
</head>

<body>
    <!-- 
        绑定样式:
            1.class样式:
                写法:class='xxx' xxx可以是字符串,对象,数组
                     字符串写法适用于:类名不确定,要动态获取
                     数组写法适用于:要绑定多个样式 个数不确定 类名也不确定
                     对象写法适用于:要绑定多个样式 个数确定 类名确定 但不确定用不用
            2.style样式
                :style="{styleObj}"其中xxx是动态值(styleObj:{fontSize:xxx })
                :style="[a,b]" a和b都是样式对象 (都是真正的css属性只不过在Vue里采取驼峰命名法表示 [{fontSize: '40px'}] )
     -->
    <div id="root">
        <!-- 绑定class样式: 字符串写法 场景:样式的类名不确定需要动态指定 -->
        <div class=" basic " :class="mood" @click="change">{{name}}</div><br><br>
        <!-- 绑定class样式: 数组写法 场景:要绑定的样式个数不确定 类名也不确定-->
        <div class=" basic " :class="classArr">{{name}}</div>
        <!-- 绑定class样式: 对象写法 场景:要绑定的样式个数确定 类名也确定 但要动态决定用不用-->
        <div class=" basic " :class="classObj">{{name}}</div>

        <div class=" basic " :style="[styleObj,styleObj2]">{{name}}</div><br>
        <div class=" basic " :style="styleArr">{{name}}</div>

    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                // 常有的class样式 写法
                name: '刘亦菲',
                mood: 'normal',
                classArr: ['zdy1', 'zdy2', 'zdy3'],
                classObj: {
                    zdy1: false,
                    zdy2: false
                },

                //    不常用的内联式style 
                styleObj: {
                    fontSize: '40px',
                    color: 'origin'
                },
                styleObj2: {
                    backgroundColor: 'pink',
                },

                styleArr: [
                    {
                        fontSize: '40px',
                        color: 'origin'
                    },
                    {
                        backgroundColor: 'pink',
                    },
                ]
            },
            methods: {
                change() {
                    const arr = ['happy', 'normal', 'sad']
                    this.mood = arr[Math.floor(Math.random() * 3)]
                },

            },

        })
    </script>
</body>

</html>